<template>
  <div class="setting-item robot-work-time-setting">
    <div class="header">
      <div class="title">
        客服机器人工作时间设置
      </div>
    </div>
    <div class="info">
      <p>
        请设置客服机器人工作时间段
      </p>
    </div>
    <div class="content">
      <el-table :data="timeData" style="width: 100%" border stripe>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="times" label="工作时间"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleEdit(scope.row)"
            >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      class="__setting-model"
      :visible="settingModelShow"
      title="设置工作时间"
      @close="handleHideModel"
    >
      <div class="set-group">
        <div class="set-item" v-for="item of timeSetData" :key="item.date">
          <label>{{ item.date }}</label>
          <div class="tags" @click.self="dispathPicker($event, item.workTimes)">
            <el-tag
              v-for="(time, index) of item.workTimes"
              :key="index"
              closable
              @close="handleRemove(item.workTimes, index)"
            >
              {{ timeToString(time) }}
            </el-tag>
          </div>
        </div>
        <el-time-picker
          class="time-picker"
          ref="timePicker"
          is-range
          v-model="pickTime"
          format="HH:mm"
          value-format="HH:mm"
          :style="{ top: timePickerTop }"
        />
      </div>
      <template #footer>
        <div class="footer">
          <el-button @click="handleHideModel">关闭</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
const defaultTimeValue = ['08:00', '17:00'];

export default {
  data() {
    return {
      settingModelShow: false,
      timeData: [
        {
          date: '星期一',
          workTimes: [
            {
              workTimeStart: '13:00',
              workTimeEnd: '14:00',
            },
          ],
          times: '13:00~14:00;',
        },
        { date: '星期二', workTimes: [] },
        { date: '星期三', workTimes: [] },
        { date: '星期四', workTimes: [] },
        { date: '星期五', workTimes: [] },
        { date: '星期六', workTimes: [] },
        { date: '星期天', workTimes: [] },
      ],
      timeSetData: [],
      timePickerTop: 0,
      currentDate: null,
      pickTime: defaultTimeValue, // 选择器使用时间
    };
  },
  mounted() {},
  methods: {
    /**
     * @des 编辑
     */
    handleEdit(data) {
      this.timeSetData = Object.assign({}, this.timeData);
      this.settingModelShow = true;
    },
    /**
     * @des 关闭 model
     */
    handleHideModel() {
      this.settingModelShow = false;
    },

    /**
     * 时间区间转字符串
     */
    timeToString(times) {
      const { workTimeStart, workTimeEnd } = times;
      return `${workTimeStart}~${workTimeEnd}`;
    },
    /**
     * @des 点击区域触发 时间选择
     */
    dispathPicker(e, times) {
      // ! 只有一个时间选择器 需要修改弹出位置 增强体验
      try {
        this.timePickerTop = `${e.target.offsetTop}px`;
      } catch (error) {
        this.timePickerTop = 0;
      }
      this.currentDate = times;
      this.pickTime = defaultTimeValue; // 初始选择器时间
      const { timePicker } = this.$refs;
      if (!timePicker.picker) {
        timePicker.showPicker(); // 显示时间选择器
        const backConfirmHndle = timePicker.picker.handleConfirm;
        // ! 时间选择器没有提供 确认按钮事件，这里覆盖内部confirm事件
        timePicker.picker.handleConfirm = () => {
          backConfirmHndle.call(timePicker.picker);
          this.handleAddTime();
        };
      } else {
        timePicker.showPicker(); // 显示时间选择器
      }
    },
    /**
     * 移除时间
     */
    handleRemove(times, index) {
      times.splice(index, 1);
    },

    /**
     * 添加时间
     */
    handleAddTime() {
      const [start, end] = this.pickTime;
      if (!start || !end) return;
      for (let v of this.currentDate) {
        if (v.workTimeStart === start && v.workTimeEnd === end) {
          return;
        }
      }
      this.currentDate.push({
        workTimeStart: start,
        workTimeEnd: end,
      });
    },

    /**
     * 保存时间
     */
    handleSave() {
      console.log(this.timeSetData);
    },
  },
};
</script>

<style lang="scss">
.robot-work-time-setting {
  .__setting-model {
    .set-group {
      position: relative;
      .set-item {
        display: flex;
        &:not(:last-of-type) {
          margin-bottom: 15px;
        }
        label {
          width: 80px;
          line-height: 40px;
        }
        .tags {
          flex: 1;
          border-radius: 4px;
          border: 1px solid #eee;
          min-height: 40px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          .el-tag {
            margin: 5px;
          }
        }
      }
      .time-picker {
        position: absolute;
        left: 100px;
        top: 0;
        right: 0;
        z-index: -1;
        opacity: 0;
      }
    }
    .footer {
      padding-top: 15px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
</style>
